<script setup>
// ref：让数据具备响应式,需要加 .value
// reactive：让引用类型的数据具备响应式，不需要加 .value
// readonly: 只读的数据，当值改变的时候会有一个提示
import { ref, reactive, readonly, computed } from 'vue'

const price = ref(100)


// 第一种用法，只读的
// 计算属性是一个函数，需要传递一个参数，参数就是计算属性函数
// 我们这里的计算属性是一个只读的计算属性
const priceVip = computed(() => {
    // 计算属性的内容
    return price.value * 0.8
})


// 定义一个可写的计算属性
// 第二种方法，可写的
// 传递的时候，传递的是一个对象，对象中有个 set 和 get 方法，set就是用来修改值的
const priceSVip = computed({
    get() {
        // 获取
        return price.value * 0.5
    },
    set(val) {
        // 设置
        price.value = val / 0.5
    }
})

function change() {
    // 计算属性在 js 中使用的时候也需要加 .value
    // console.log(priceVip.value);

    // 只读的无法修改
    // priceVip.value = 90


    // console.log(priceSVip);
    priceSVip.value = 88

}

</script>

<template>
    <h1>组合式 API</h1>
    <h1>
        原价：{{ price }}, vip: {{ priceVip }}, SVip: {{ priceSVip }}
    </h1>
    <button @click="change">修改</button>

</template>
